<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="page-main flex space-between" ref="pageMain">
			<div class="page-l">
				<div class="common-title">
					列表
				</div>

				<div class="search-box flex align-center">
					<el-date-picker size="default" v-model="state.apiData.operationAt" type="date" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" placeholder="请选择手术时间" @change="getList" />

					<el-select v-model="state.apiData.status" placeholder="请选择通知发送状态" size="default"
						style="width: 180px;margin-left: 20px;" clearable @change="getList">
						<el-option label="已发送" :value="1"></el-option>
						<el-option label="未发送" :value="2"></el-option>
					</el-select>
				</div>

				<div class="export-box flex justify-end">
					<el-button type="primary" size="default" @click="exportExcel()">
						导出Excel
					</el-button>
				</div>

				<el-table :data="state.tableData.data" v-loading="state.tableData.loading" border style="width: 100%"
					:height="state.tableHeight" ref="multipleTableRef" @selection-change="handleSelectionChange"
					@row-click="handleRowClick" :row-style="rowStyle">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column type="index" label="序号" width="80" align="center" />
					<el-table-column prop="patient.name" label="患者姓名" width="100" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="patient.phone" label="电话" width="120" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column label="手术时间" width="170" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.operationAt ? scope.row.operation.operationAt : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="上下午" show-overflow-tooltip align="center" width="100">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.period == 'AM' ? '上午' : '下午' }}
						</template>
					</el-table-column>
					<el-table-column label="主刀医生" width="100" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.chiefDoctor ? scope.row.operation.chiefDoctor.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="手术" width="150" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.operation ? scope.row.operation.operation.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="麻醉" width="100" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ (scope.row.anesthesiaAssessment && scope.row.anesthesiaAssessment.anesthesiaMode) ?
								scope.row.anesthesiaAssessment.anesthesiaMode.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="当前状态" show-overflow-tooltip align="center" width="100">
						<template #default="scope">
							{{ scope.row.noticePatient ? '已发送' : '未发送' }}
						</template>
					</el-table-column>
					<el-table-column prop="hospital_id" label="房间号" width="150" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.operationRoom ? scope.row.operation.operationRoom + '号手术室' : '-'
							}}
						</template>
					</el-table-column>
					<el-table-column prop="hospital_id" label="台次" width="150" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.num ? '第' + scope.row.operation.num + '台' : '-' }}
						</template>
					</el-table-column>
				</el-table>

				<div class="pagination-box">
					<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiData.page" background
						v-model:page-size="state.apiData.pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total">
					</el-pagination>
				</div>

			</div>
			<div class="page-r">
				<div class="common-title">
					通知信息
				</div>
				<el-scrollbar v-if="state.activeRow" v-loading="state.templateLoading">
					<div class="sub-title">热词选择</div>
					<div class="hotwords-list ">
						<el-checkbox-group v-model="state.selectedHotList" size="small" class="check-box" @change="getTemplate()">
							<el-checkbox v-for="(item, index) in state.patientConfig.hot" :key="index" :label="item" border />
						</el-checkbox-group>
						<el-checkbox-group v-model="state.selectedTimeList" size="small" class="check-box" @change="getTemplate()">
							<el-checkbox v-for="(item, index) in state.patientConfig.time" :key="index" :label="item" border />
						</el-checkbox-group>
						<el-time-picker v-model="state.pickerTime" size="small" format="HH:mm" value-format="HH:mm"  placeholder="请选择时间" style="width:100px;" @change="getTemplate()">
						</el-time-picker>
					</div>
					<div class="sp-line"></div>
					<el-input v-model="state.noticeTemplate" :autosize="{ minRows: 18 }" type="textarea" placeholder="请输入通知内容"
						maxlength="500" show-word-limit />

					<div class="tag-list">
						<el-tag v-for="(item, index) in state.selectedHotList" :key="index" closable class="tag-item" size="small"
							@close="handleHotClose(item)">
							{{ item }}
						</el-tag>
						<el-tag v-for="(item, index) in state.selectedTimeList" :key="index" closable class="tag-item" size="small"
							@close="handleTimeClose(item)">
							{{ item }}
						</el-tag>
					</div>

					<el-button type="primary" size="default" style="width: 100%;margin: 20px 0;" @click="sendNotice()">
						发送
					</el-button>

				</el-scrollbar>
				<el-empty v-else description="请选择发送人" />

			</div>
		</div>


	</div>
</template>

<script setup name="dsProcess-notice-patient">
import dayjs from 'dayjs'
import { formatWeedDay } from '/@/utils/formatTime';
import { getCurrentInstance } from 'vue';
import { noticeApi } from '/@/api/ds/notice'
import { toolsApi } from '/@/api/tools'
import { ElMessage, ElMessageBox } from 'element-plus';
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));


// 定义变量内容
const state = reactive({
	apiData: {
		page: 1,
		pageSize: 10,
		operationAt: null,
		status: '',
		type: 1
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
	activeRow: null,

	selectedHotList: [],
	selectedTimeList: [],
	patientConfig: null,
	noticeTemplate: '',
	templateLoading: false,
	pickerTime: null
});








// 页面加载时
onMounted(() => {
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 270 + "px";
	getFourDays()
	getList()
	getHotWords()
});


const getFourDays = () => {
	state.apiData.operationAt = dayjs().startOf('day').format('YYYY-MM-DD')
}

// 格式化radio显示
const formatValue = (value) => {
	return dayjs(value * 1000).format("MM.DD") + ' ' + formatWeedDay(dayjs(value * 1000).day())
}




// 导出
const exportExcel = () => {

}

// 获取热词
const getHotWords = () => {
	noticeApi().noticeConfig().then(res => {
		state.patientConfig = res.data.patient
		state.noticeTemplate = res.data.patient.template
	})

}

// 发送通知按钮
const sendNotice = () => {
	ElMessageBox.confirm(`确认发送通知吗?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			const apiData = {
				prid: state.activeRow,
				hot: state.selectedHotList,
				time: state.pickerTime?state.selectedTimeList.concat([state.pickerTime]):state.selectedTimeList,
				template: state.patientConfig.template
			}

			noticeApi().sendPatient(apiData).then(res => {
				ElMessage.success('操作成功');
				state.activeRow = null
				state.selectedHotList = []
				state.selectedTimeList = []
				state.pickerTime = null
				getList()
				getHotWords()
			})
		})
		.catch(() => { });
}

const handleSelectionChange = () => {

}


const handleRowClick = (row) => {
	state.activeRow = row.id
	state.selectedHotList = []
	state.selectedTimeList = []
	state.pickerTime = null
	if(row.noticePatient){ // 已发送
		state.noticeTemplate = row.noticePatient.content
		state.selectedHotList = row.noticePatient.hot

		if(row.noticePatient.time){
			let newTimeList = []
			let selectTime = null
			row.noticePatient.time.forEach(item => {
				if(state.patientConfig.time.indexOf(item) != -1){
					newTimeList.push(item)
				}else{
					selectTime = item
				}
			});
			state.selectedTimeList = newTimeList
			state.pickerTime =  selectTime
		}
		

		// state.pickerTime = null
	}else{ // 未发送
		getTemplate()
	}
}

const getTemplate = () => {
	state.templateLoading = true

	
	const apiData = {
		prid: state.activeRow,
		hot: state.selectedHotList,
		time: state.pickerTime?state.selectedTimeList.concat([state.pickerTime]):state.selectedTimeList
	}
	toolsApi().getNoticePatientTemplate(apiData).then(res => {
		state.templateLoading = false
		state.noticeTemplate = res.data.content
	}).catch(() => {
		state.templateLoading = false
	})
}

const handleHotClose = (tag) => {
	state.selectedHotList = state.selectedHotList.filter(item => {
		return item !== tag
	})
	getTemplate()
}

const handleTimeClose = (tag) => {
	state.selectedTimeList = state.selectedTimeList.filter(item => {
		return item !== tag
	})
	getTemplate()
}



// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.pageSize = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	getList();
};

// 如果当前行index 是点击行，就改变颜色
const rowStyle = ({ row, rowIndex }) => {
	if (row.id == state.activeRow) {
		return {
			'background-color': 'rgba(48, 129, 244, 0.08) !important'
		}
	}
}

// 获取列表
const getList = () => {
	state.tableData.loading = true
	const newApiData = JSON.parse(JSON.stringify(state.apiData))
	noticeApi().noticeList(newApiData).then(res => {
		state.tableData.loading = false
		state.tableData.data = res.data.items
		state.tableData.total = res.data.total
	})

}
</script>

<style lang="scss" scoped>
.page-main {
	width: 100%;
	height: calc(100vh - 100px);

	.search-box {
		margin-top: 20px;
	}

	.export-box {
		padding: 20px 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.page-l,
	.page-r {
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
	}

	.page-l {
		width: 70%;
		height: 100%;


	}

	.page-r {
		width: 28.5%;
		height: 100%;

		.hotwords-list {
			:deep() .el-checkbox {
				margin-right: 5px !important;
				margin-bottom: 5px !important;
			}

			:deep() .el-checkbox__input {
				display: none !important;
			}

			:deep() .el-checkbox__label {
				padding: 0;
			}

			.check-box {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				// grid-template-columns: repeat(2,1fr);
				// gap: 5%;
			}
		}

		.sp-line {
			margin: 20px 0;
			width: 100%;
			height: 1px;
			background-color: #e0e0e0;
		}

	}

	.sub-title {
		color: #999;
		font-size: 13px;
		margin: 10px 2px;
	}

	.tag-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		margin-top: 20px;
	}


}
</style>
